<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../../mdui/css/mdui.min.css">
    <link rel="stylesheet" href="../../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
    <script defer src="../../mdui/js/mdui.min.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/qs.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-green">
<div class="mdui-container-fluid" id="app">
    <h1 class="mdui-text-color-theme">待完成报修单</h1>
    <div style="width: auto">
        <table class="mdui-table mdui-table-hoverable">
            <thead>
            <tr>
                <th>状态</th>
                <th>详情</th>
                <th>地点</th>
                <th>提交时间</th>
                <th>提交人</th>
                <th>查看详情</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(r,index) in rapairs">
                <td>{{r.status |fmtGenter}}</td>
                <td>{{r.detail}}</td>
                <td>{{r.place}}</td>
                <td>{{r.submitTime}}</td>
                <td>{{r.student.name}}</td>
                <td><a :href="'detail.html?id='+r.id"> 查看 </a>
                </td>
            </tr>
            </tbody>
        </table>

        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <span aria-hidden="true" @click="Previous">&laquo;</span>
                </li>

                <li v-for="(f,index ) in fenye"><a @click="qieye(index)" href="javascript:;"
                                                   class="active"> {{index + 1}} </a></li>

                <li>

                    <span aria-hidden="true" @click="Next">&raquo;</span>

                </li>
            </ul>
        </nav>

    </div>
</div>

<script>

    let vm = new Vue({
        el: '#app',
        data: {
            id: '',
            place: '',
            rapairs: [],
            rapair: [],
            page: 0,
            size: 10,
            total: '',
            fenye: '',
            index: ''
        },

        created() {
            this.unfinishedAll();
            console.log(this.fenye)
            console.log(this.rapairs)
            this.findrepaires();


        },

        filters: {
            fmtGenter(val) {

                if (val == 1) {
                    return "未安排维修维修"
                } else if (val == 2) {
                    return "已安排检修"
                } else if (val == 3) {
                    return "待同意取消，"
                } else if (val == 4) {
                    return "已同意取消"
                } else if (val == 5) {
                    return "待验收"
                } else if (val == 6) {
                    return "已验收"
                }
            }
        },
        methods: {
            unfinishedAll() {
                let _this = this;
                axios.get("/repair/unfinishedAll")
                    .then(function (res) {
                        _this.total = res.data.length;
                        _this.fenye = Math.ceil(_this.total / _this.size);
                        console.log(_this.fenye);
                    })

            },

            findrepaires() {
                let _this = this;
                axios.get("/repair/unfinished", {
                    params: {
                        page: _this.page,
                        size: _this.size,
                    }
                })
                    .then(function (res) {
                        _this.rapairs = res.data;

                    })
            },

            qieye(num) {
                console.log(num)
                this.page = num
                this.index = num;
                console.log(this.index)
                this.findrepaires();
            },
            Previous() {
                this.index -= 1;
                if (this.index < 0)
                    return
                this.qieye(this.index)
                this.findrepaires();
            },
            Next() {
                this.index += 1;
                if (this.index >= this.fenye)
                    return
                this.qieye(this.index)
                this.findrepaires();
            },

            deleteItems() {
                let arr = [];//存放选项中的ID
                let items = document.getElementsByClassName("item");//获取手所有的checkbox
                for (let i = 0; i < items.length; i++) {
                    if (items[i].checked) {
                        arr.push(items[i].value)
                    }
                }
                // console.log(arr)
                if (arr.length == 0) {
                    mdui.alert("请选择删除的行")
                    return
                }
                let _this = this
                axios.delete("/repair/remove?ids=" + arr.toString())
                    .then(function (res) {
                        if (res.data) {
                            mdui.alert("批量处理成功")
                            _this.findrepaires();//更新列表
                        }
                    })
            },
            selectAll(event) {
                let checked = event.target.checked;
                // console.log(checked)
                let items = document.getElementsByClassName("item");//获取手所有的checkbox

                //设置所有的都为checked
                for (let i = 0; i < items.length; i++) {
                    items[i].checked = checked;
                }
            },
            reset() {
                this.id = '';
                this.place = '';
            },
            deleteUser(uid, index) //uid传到后台后台正确删除后 根据index移除数组中对应的数据
            {
                console.log(123)
                let _this = this;
                axios.delete("/repair/deleteRepair/" + uid)
                    .then(function (res) {
                        if (res.data.success) {
                            _this.rapairs.splice(index, 1)
                            mdui.alert("删除成功");
                            mdui.mutation()
                        }
                    })
            },
            //根据条件查询
            findrepaire() {
                let _this = this
                axios.get("/repair/findByKeywords", {
                    params: {
                        id: this.id,
                        place: this.place,
                    }
                })
                    .then(function (res) {
                        _this.rapairs = res.data;
                    })
            }
        },
    })
</script>
</body>
</html>